<template>
	<view class="content">
		<form action="">
			<div class="input">
				<label for="">新密码</label>
				<input v-model="newpassword" type="text" placeholder="请输入新密码" placeholder-style="color:#ccc;"/>
			</div>
			<div class="input">
				<label for="">确认密码</label>
				<input type="text" placeholder="再次输入新密码" placeholder-style="color:#ccc;"/>
			</div>
			<div class="input">
				<label for="dx">短信验证码</label>
				<input   type="text" id="dx" placeholder="请输入短信验证码" placeholder-style="color:#ccc;"/>
				<label v-if="flag"  @tap='send' for="" style="color: red;">获取验证码</label>
				<text class="time" v-else >请在{{number}}秒后发送</text>
			</div>
			
			<div class="input">
				<label for="tx">图形验证码</label>
				<input type="text" id="tx" placeholder="请输入图形验证码" placeholder-style="color:#ccc;"/>
				<label @tap="change">M8K2</label>
			</div>
			
			
			<div class="btn">
				<button  :style="{backgroundColor:bg}">确定</button>
			</div>
			
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bg: '#F27F88',
				newpassword:"",
				flag: true,
				number: 10,
			}
		},
		methods: {
			//发送短信事件
			send() {
				var time = null
				this.flag = false,
					uni.showToast({
						title: '获取成功'
					});
				var time = setInterval(() => {
					if (this.number !== 0) {
						this.number--
					} else {
						this.flag = true
						this.number = 10
						clearInterval(time)
					}
				}, 1000)
			}, //获取验证码
			//数字变化
			change(){
				
			},
		},
		watch:{
			newpassword(n,o){
				if(n !== ''){
					this.bg = 'red'
				}else{
					this.bg = '#F27F88'
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.btn{
		margin-top: 61upx;
		padding: 0 30upx;
		button{
			background-color: red;
			color: white;
		}
	}
	input placeholder{
		color: red;
	}
	label {
		color: #7F7F7F;
		width: 150upx;
		font-size: 30upx;
		margin-left: 30upx;
	}

	.time{
		white-space: normal;
		font-size: 25upx;
	}
	.input {
		width: 100%;
		height: 100upx;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #ececec;
		input{
			margin-left: 20upx;
		}
	}

	.content {
		width: 100%;
		height: 100%;
	}
</style>
